<template>
    <div class="category-detail-page">
        <el-card shadow="never">
            <el-form
                :model="form"
                label-position="right"
                label-suffix=":"
                label-width="100px"
                ref="form"
                :rules="rules">
                <el-form-item label="题目名称" prop="name">
                    <el-input
                        type="textarea"
                        v-model="form.name"
                        placeholder="请输入作业思考题题目名称"
                    ></el-input>
                </el-form-item>
                <el-form-item label="题目描述" v-if="form.form_type === 3 && form.form_type">
                    <el-button type="primary" @click="addDescribe">{{ "逐条增加题目描述信息" }}</el-button>
                    <el-table :data="form.describes" size="mini" v-if="form.describes.length > 0">
                        <el-table-column label="描述内容">
                            <template slot-scope="{$index}">
                                <el-input
                                    v-model="form.describes[$index]"
                                    type="textarea"
                                    placeholder="请输入描述内容"/>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="{$index}">
                                <el-button
                                    type="text"
                                    @click="delDescribe($index)"
                                    class="red-color">
                                    {{ "移除" }}
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-form-item>
                <el-form-item label="关联学习主题">
                    <el-button type="primary" @click="getCourse">{{ "将本题关联到一个学习主题" }}</el-button>
                    <course-list
                        v-show="form.courses.length > 0"
                        :list="form.courses"
                        @delete="deleteCourse"></course-list>
                </el-form-item>
                <el-form-item label="题目类型">
                    <el-select
                        v-model="form.form_type"
                        filterable
                        clearable>
                        <el-option
                            v-for="item in formTypeOptions"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="题目选项" v-if="form.form_type !== 4 && form.form_type">
                    <el-button type="primary" @click="addOption">{{ "增加题目选项" }}</el-button>
                    <el-table :data="form.option" size="mini" v-if="form.option.length > 0">
                        <el-table-column label="题目选项" prop="context">
                            <template slot-scope="{row}">
                                <el-input
                                    type="textarea"
                                    v-model="row.context"
                                    placeholder="请输入题目选项内容"/>
                            </template>
                        </el-table-column>
                        <el-table-column label="选项分值" prop="score" v-if="form.type === 2">
                            <template slot-scope="{row}">
                                <el-input-number
                                    :min="0"
                                    v-model="row.score"/>
                            </template>
                        </el-table-column>
                        <el-table-column label="题目选项参考答案" prop="answer">
                            <template slot-scope="{row}">
                                <el-checkbox
                                    v-model="row.answer"/>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="{$index}">
                                <el-button
                                    type="text"
                                    @click="delOption($index)"
                                    class="red-color">
                                    {{ "移除" }}
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-form-item>
                <el-form-item label="参考答案" v-if="form.form_type == 4">
                    <el-input
                        type="textarea"
                        v-model="form.answer"
                        placeholder="请输入问答题参考答案"/>
                </el-form-item>
                <course-dialog ref="course" :studyId="form.course_id" @addCourse="addCourseHandle"></course-dialog>
            </el-form>
            <div class="text-center">
                <el-button :loading="posting" type="primary" @click="onSave">保 存</el-button>
            </div>
        </el-card>
    </div>
</template>

<script>
import CourseDialog from '../../components/dialog/CourseDialog';
import CourseList from '../../components/page/CourseList';

export default {
    components: {
        CourseDialog,
        CourseList,
    },
    data() {
        return {
            posting: false,
            form: {
                name: '',
                type: 1,
                form_type: '',
                option: [],
                describes: [],
                answer: '',
                course_id: '',
                courses: [],
                company_id: '',
            },
            id: this.$route.params.id,
            rules: {
                name: [
                    { required: true, message: '名称不能为空', trigger: 'blur' },
                ],
                form_type: [
                    { required: true, message: '题目类型不能为空', trigger: 'blur' },
                ],
                course_id: [
                    { required: true, message: '学习主题不能为空', trigger: 'blur' },
                ],
            },
            formTypeOptions: [
                {id: 1, name: '单选题'},
                {id: 2, name: '多选题'},
                {id: 3, name: '判断题'},
                {id: 4, name: '问答题'},
            ],
            originOptions: [],
        };
    },
    methods: {
        onSave() {
            this.$refs.form.validate((valid) => {
                if (!valid) return;
                if (!this.form.course_id) {
                    $ele.$message.error('请先选择学习主题');
                    return;
                }
                if (this.form.form_type !== 4 && this.form.option.length === 0) {
                    $ele.$message.error('请先设置题目选项');
                    return;
                }
                for (const option of this.form.option) {
                    if (!option.context) {
                        $ele.$message.error('题目选项内容不能为空');
                        return;
                    }
                }
                // 对于非判断题类型, 移除原分点描述内容数据
                if (this.form.form_type !== 3) {
                    this.form.describes = [];
                } else {
                    for (const describe of this.form.describes) {
                        if (!describe) {
                            $ele.$message.error('分点描述内容不能为空');
                            return;
                        }
                    }
                }
                this.initOptionId();
                this.posting = true;
                if (this.id) {
                    API.put(`question/${this.id}`, this.form).then(() => {
                        // this.$router.push({name: 'QuestionManage'});
                        this.$router.go(-1);
                    }).catch(err => {
                        $ele.$message.error(err.message);
                    }).finally(() => this.posting = false);
                } else {
                    API.post('question', this.form).then(() => {
                        this.$router.push({name: 'QuestionManage'});
                    }).catch(err => {
                        $ele.$message.error(err.message);
                    }).finally(() => this.posting = false);
                }
            });
        },
        fetchData() {
            if (this.id) {
                API.get(`question/${this.id}`).then((res) => {
                    for (const i of Object.keys(this.form)) {
                        if (res[i] || res[i] === 0) this.form[i] = res[i];
                    }
                    if (this.form.form_type !== 4) {
                        this.originOptions = this.form.option;
                    }
                });
            }
        },
        addCourseHandle(course) {
            this.form.courses = [];
            this.form.course_id = course.id;
            this.form.courses.push(course);
            $ele.$message.success('选择学习主题成功');
            this.$refs.course.close();
        },
        getCourse() {
            this.$refs.course.open();
        },
        deleteCourse(index) {
            this.form.courses.splice(index, 1);
            this.form.course_id = '';
        },
        addOption() {
            this.form.option.push({
                id: '',
                context: '',
                score: '',
                answer: false,
            });
        },
        delOption(index) {
            this.form.option.splice(index, 1);
        },
        addDescribe() {
            this.form.describes.push('');
        },
        delDescribe(index) {
            this.form.describes.splice(index, 1);
        },
        initOptionId() {
            this.form.option.map((item, index) => {
                if (!item.id) {
                    if (index !== 0) {
                        // 取上一级选项的ID 累加1
                        item.id = this.form.option[(index - 1)].id + 1;
                    } else {
                        item.id = index + 1;
                    }
                }
                return item;
            });
        },
    },
    mounted() {
        this.fetchData();
    },
};
</script>

<style lang="scss">
.category-detail-page {
    .input-width {
        width: 300px;
    }
    .picture {
        width: 200px;
        height: 200px;
        line-height: 200px;
    }
    .uploader-icon {
        font-size: 20px;
        color: #8c939d;
        text-align: center;
    }
    .image-uploader {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
}
</style>
